<!--
 * @description: Description
 * @author: lizlong<94648929@qq.com>
 * @since: 2021-03-15 20:50:43
 * @LastAuthor: lizlong
 * @lastTime: 2021-03-16 18:12:59
-->
<template>
	<el-container class="map-container">
		<el-header height="32px" class="map-header">
			<el-row type="flex" class="row-bg" justify="space-between">
				<div>1</div>
				<div class="header-top-right">
					<el-button type="text" size="mini">
						<i class="el-icon-minus"></i>
					</el-button>
					<el-button type="text" size="mini" @click="clickFullscreen">
						<i class="el-icon-copy-document"></i>
					</el-button>
					<el-button type="text" size="mini">
						<i class="el-icon-close"></i>
					</el-button>
				</div>
			</el-row>
		</el-header>
		<el-main class="map-main">
			<div id="map" class="map" v-loading="loading"></div>
			<!-- 自定义模块 -->
			<div id="tp-weather-widget"></div>
		</el-main>
	</el-container>
</template>

<script>
import screenfull from "screenfull";

// @ is an alias to /src
import "ol/ol.css";
import { Map, View } from "ol";
// import vectorLayer from "ol/layer/Vector";
// import SourceVector from "ol/source/Vector";
// import GeoJSON from "ol/format/GeoJSON";
// 控制组件
// import Control from "ol/control/Control";
import Attribution from "ol/control/Attribution"; // 地图属性控件
// import FullScreen from "ol/control/FullScreen"; // 全屏控件
import MousePosition from "ol/control/MousePosition"; // 鼠标位置控件
// import OverviewMap from "ol/control/OverviewMap"; // 鹰眼控件
import Rotate from "ol/control/Rotate"; // 地图旋转控件
import ScaleLine from "ol/control/ScaleLine"; // 比例尺控件
// import ZoomSlider from "ol/control/ZoomSlider"; // 缩放滚动条控件
// import ZoomToExtent from "ol/control/ZoomToExtent"; // 缩放到范围控件
import Zoom from "ol/control/Zoom"; // 放大缩小控件
import { getProjection, vec_c } from "./tools";

import { getDivision } from "@/api/administrativedivision";

export default {
	name: "Home",
	components: {},
	data() {
		return {
			map: null,
			loading: true,
		};
	},
	mounted() {
		this.map = new Map({
			target: "map",
			layers: [...vec_c()],
			view: new View({
				// center: [113.926656, 30.926423],
				center: [114.410799,30.447586],
				projection: getProjection(),
				zoom: 16,
				minZoom: 6,
				maxZoom: 18.9,
				enableRotation: false,
			}),
		});
		//添加比例尺控件
		this.map.addControl(new Attribution());
		this.map.addControl(new MousePosition());
		this.map.addControl(new Rotate());
		this.map.addControl(new ScaleLine());
		this.map.addControl(new Zoom());
		this.loading = false;

		this.searchCity();
		this.initWeather();
	},
	methods: {
		searchCity() {
			getDivision({
				code: "420900",
			}).then((res) => {
				let arr = res.geom;
				console.log(arr);
			});
		},
		/**
		 * 全屏
		 */
		clickFullscreen() {
			if (!screenfull.isEnabled) {
				this.$message({
					message: "you browser can not work",
					type: "warning",
				});
				return false;
			}
			screenfull.toggle();
		},
		initWeather() {
			(function (a, h, g, f, e, d, c, b) {
				b = function () {
					d = h.createElement(g);
					c = h.getElementsByTagName(g)[0];
					d.src = e;
					d.charset = "utf-8";
					d.async = 1;
					c.parentNode.insertBefore(d, c);
				};
				a["SeniverseWeatherWidgetObject"] = f;
				a[f] ||
					(a[f] = function () {
						(a[f].q = a[f].q || []).push(arguments);
					});
				a[f].l = +new Date();
				if (a.attachEvent) {
					a.attachEvent("onload", b);
				} else {
					a.addEventListener("load", b, false);
				}
			})(
				window,
				document,
				"script",
				"SeniverseWeatherWidget",
				"//cdn.sencdn.com/widget2/static/js/bundle.js?t=" +
					parseInt((new Date().getTime() / 100000000).toString(), 10)
			);
			window.SeniverseWeatherWidget("show", {
				flavor: "slim",
				location: "WT95SG5SSDX9",
				geolocation: false,
				language: "zh-Hans",
				unit: "c",
				theme: "dark",
				token: "f2feeec6-9f2d-49e5-8d9d-822b8eb7e989",
				hover: "enabled",
				container: "tp-weather-widget",
			});
		},
	},
};
</script>

<style>
.map-container {
	height: 100%;
	color: #fff;
	font-size: 13px;
}
.map-container .map-header {
	line-height: 32px;
	background-color: rgba(0, 60, 136, 1);
	box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1);
}
.map-container .map-main {
	position: relative;
	padding: 0;
}
.map {
	position: relative;
	width: 100%;
	height: 100%;
}

.ol-mouse-position {
	top: 56px;
	color: #fff;
	background: rgba(0, 60, 136, 0.3);
	border-radius: 4px;
	padding: 2px;
}

#tp-weather-widget {
	position: absolute;
	top: 8px;
	right: 8px;
	/* height: 20px; */
	/* line-height: 20px; */
	background: rgba(0, 60, 136, 0.3);
	border-radius: 4px;
	padding: 4px 6px;
}

#tp-weather-widget .jEbFAF {
	left: auto;
	right: -6px;
}
</style>